<template>
    <div id="safety-precautions" class="w-h-100 pos-r flex-1 apply-container page-public-s" style="box-sizing: border-box;overflow:hidden;">
        <el-row class="w-h-100" :gutter="10">
            <el-col :xs="24" :sm="4" :md="4" :lg="4" :xl="4" class="w-h-100">
                <div style="box-sizing: border-box;" class="flex-1 pos-r w-h-100">
                    <div class="pos-a w-h-100" style="box-sizing: border-box;">
                        <el-card class="box-card w-h-100" shadow="never">
                            <div style="" class="w-h-100 ver-flex">
                                <div class="flex-1 pos-r">
                                    <div class="pos-a w-h-100">
                                        <div class="w-h-100">
                                            <ul>
                                                <li class="area-l" v-for="item in areaInfo" :key="item.id" @click="liClick(item)" :class="{ 'active': selectedItem === item.id }">{{ item.value }}</li>
                                            </ul>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </el-card>
                    </div>
                </div>
            </el-col>
            <el-col :xs="24" :sm="20" :md="20" :lg="20" :xl="20" class="w-h-100">
                <div class="w-h-100 ver-flex pos-a" style="box-sizing: border-box;width: 83%;overflow: hidden;">
                    <div v-if="$hasPer('JobCreat:add') || $hasPer('JobCreat:excel')" style="box-sizing: border-box;">
                        <el-card shadow="never" :body-style="{ paddingBottom: '0' }">
                            <el-form class="box-f" ref="queryForm" :inline="true">
                                <el-form-item>
                                    <el-button v-if="$hasPer('SafetyPrecautions:add')" @click="nodeClick('')" icon="ele-Plus" type="primary"> 新增 </el-button>
                                    <el-button v-if="$hasPer('SafetyPrecautions:excel')" @click="handleExport" icon="ele-Download"> 导出数据 </el-button>
                                </el-form-item>
                            </el-form>
                        </el-card>
                    </div>

                    <div style="box-sizing: border-box;" class="flex-1 pos-r">
                        <div class="pos-a w-h-100" style="box-sizing: border-box;">
                            <el-card class="box-card w-h-100" shadow="never" style="margin-top: 16px;">
                                <div style="" class="w-h-100 ver-flex">
                                    <div class="flex-1 pos-r">
                                        <div class="pos-a w-h-100">
                                            <el-table 
                                                ref="excelRef"
                                                :data="list" 
                                                class="w-h-100" 
                                                style="width: 100%" 
                                                border 
                                                v-loading="loading" 
                                                element-loading-background="rgba(0, 0, 0, 0.5)"
                                            >

                                                <el-table-column min-width="55" :show-overflow-tooltip="true" prop="n_Sort" label="序号"  align="center" sortable>
                                                    <template #default="scope">
                                                        <span>{{ scope.row.n_Sort }}</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column min-width="200" :show-overflow-tooltip="true" label="名称"  align="center">
                                                    <el-table-column :show-overflow-tooltip="true" min-width="200" align="center">
                                                        <template #header>
                                                            <SearchModel typeId="i_Name" typeVal="input" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                        </template>
                                                        <template #default="scope">
                                                            <span v-if="scope.row.v_Name">{{ scope.row.v_Name }}</span>
                                                            <span v-else> - </span>
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>

                                                <el-table-column width="260" :show-overflow-tooltip="true" label="确认过程安全措施是否可编辑"  align="center">
                                                    <el-table-column :show-overflow-tooltip="true" width="260" align="center">
                                                        <template #header>
                                                            <SearchModel typeId="s_CanEdit" typeVal="select" @searchHandel="searchHandel" :basicsInfo="basicsInfo" />
                                                        </template>
                                                        <template #default="scope">
                                                            <span v-if="scope.row.isCanEdit" style="color: #67C23A;">是</span>
                                                            <span v-else style="color: #E6A23C;">否</span>
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>

                                                <el-table-column min-width="200" :show-overflow-tooltip="true" label="作业票据类型"  align="center">
                                                    <template #default="scope">
                                                        <span v-if="scope.row.v_JobTypeName">{{ scope.row.v_JobTypeName }}</span>
                                                        <span v-else> - </span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column min-width="180" :show-overflow-tooltip="true" prop="createdTime" label="创建时间"  align="center" sortable>
                                                    <template #default="scope">
                                                        <span v-if="scope.row.createdTime">{{ scope.row.createdTime }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column min-width="180" :show-overflow-tooltip="true" prop="updatedTime" label="更新时间"  align="center" sortable>
                                                    <template #default="scope">
                                                        <span v-if="scope.row.updatedTime">{{ scope.row.updatedTime }}</span>
                                                        <span v-else>-</span>
                                                    </template>
                                                </el-table-column>

                                                <el-table-column width="200" label="操作" align="center" fixed="right">
                                                    <el-table-column :show-overflow-tooltip="true" width="200" align="center">
                                                        <template #header>
                                                            <el-button class="icon-e" @click='searchClick' icon="ele-Search" size="small" type="primary" text> 查询 </el-button>
                                                            <el-button class="icon-e clear-bg" style="background-color: transparent !important;" size="small" @click="resetClick" icon="ele-Refresh" text> 重置 </el-button>
                                                        </template>
                                                        <template #default="scope">
                                                            <el-button v-if="$hasPer('SafetyPrecautions:edit')" @click="nodeClick(scope.row)" class="icon-e" icon="ele-Edit" size="small" text type="primary">编辑</el-button>
                                                            <el-button v-if="$hasPer('SafetyPrecautions:del')" @click="deleteHandle(scope.row.id, getData)" class="icon-e" icon="ele-Delete" size="small" text type="danger">删除</el-button>
                                                        </template>
                                                    </el-table-column>
                                                </el-table-column>
                                            </el-table>
                                        </div>
                                    </div>
                                    <div style="height: 30px;margin-top: 20px;" class="hr-flex-start">
                                        <el-pagination
                                            v-model:currentPage="pageNo"
                                            v-model:page-size="pageSize"
                                            :total="totalRows"
                                            :page-sizes="[10, 20, 50, 100]"
                                            small
                                            background
                                            @size-change="handleSizeChange"
                                            @current-change="handleCurrentChange"
                                            layout="total, sizes, prev, pager, next, jumper"
                                            class="w-h-100"
                                        />
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </div>
                </div>
            </el-col>
        </el-row>
        <!-- 新增/编辑 -->
        <AddEditSafetyPrecautions
            :currentStatus="currentStatus"
            :repairInfo="repairInfo"
            :isUseDialog="isUseDialog"
            @updateData="getData"
            @cancelUseClick="cancelUseClick"
            @controlUseClick="controlUseClick"
        />
    </div>
</template>
<script lang="ts">
import { defineComponent, ref, Ref, onMounted , reactive , toRaw , toRefs } from 'vue';
import getTableData from '/@/utils/getTableData';
import AddEditSafetyPrecautions from '../component/sms/add-edit-SafetyPrecautions.vue';
import { 
    SMSJOBSafetyPrecautionTempPage,
    SMSJOBSafetyPrecautionTempDelete,
    sysDictDataList, 
} from '/@/api/centerControl/sms';
import { ElMessageBox , ElMessage } from 'element-plus';
import SearchModel from '../component/search-model.vue';
import DetailModel from '../component/detail-model.vue';
import { exportToExcel } from '/@/utils/exportToExcel';

export default defineComponent( {
    name: 'safety-precautions',
    components: { AddEditSafetyPrecautions , SearchModel , DetailModel },
    setup(props){
        const isUseDialog = ref(false); // 新增/编辑弹出框隐藏/显示
        const repairInfo = ref(); // 传递子组件数据
        const isHoldDialog = ref(false);
        const areaInfo = ref();
        const selectedItem = ref();
        const currentStatus = ref(0);
        const liClick = (val: any) => {
            selectedItem.value = val.id;
            if(val.code === 'GetAngry'){
                searchObj.n_JobType = 0;
                currentStatus.value = 0;
            } // 动火
            if(val.code === 'electro'){
                searchObj.n_JobType = 1;
                currentStatus.value = 1;
            } // 临时用电
            resetClick();
        }
        /*** 获取数据字典 */
        const getDictFun = async() => {
            let param: any = {};
            param.TypeCode = 'JobType';
            let res: any = await sysDictDataList(param);
            if(res.success && res.data.length !== 0){
                areaInfo.value = res.data;
                searchObj.n_JobType = 0;
                selectedItem.value = res.data[0].id;
            }
        }
        /*** 新增/编辑 */
        const nodeClick = (val: any) => {
            repairInfo.value = val === '' ? '' : JSON.stringify(val);
            isUseDialog.value = true;
        }

        /*** 取消事件 */
        const cancelUseClick = () => {
            isUseDialog.value = false;
        }

        /*** 提交事件 */
        const controlUseClick = () => {
            isUseDialog.value = false;
        }

        /*** 删除事件 */
        const deleteHandle = (val: number, updateFun: Function) => {
            ElMessageBox.confirm('请确定删除此条数据？','提示',
                {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }
            )
            .then(async() => {
                let param = {id : val}
                try {
                    let res:any = await SMSJOBSafetyPrecautionTempDelete(param);
                    if(res.success){
                        updateFun()
                    }
                } catch (err) { return }
            })
            .catch(() => {
                ElMessage({
                    type: 'info',
                    message: '已取消',
                })
            })
        }
        
        /*** ================================= 查询类数据操作 =================================  */
        let searchObj:any = reactive({
            n_JobType: '',
        });
        const basicsInfo: any = ref([]);
        const searInfo: any = ref();

        /*** 获取需要查询的数据 */
        const searchHandel = (val: any) => {
            searInfo.value = val;
        }

        /*** 查询按钮 */
        const searchClick = async () => {
            let newObj = Object.keys(searInfo.value);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = searInfo.value[i];
                });
            }
            searchObj.n_JobType = currentStatus.value;
        };

        /*** 重置按钮 */
        const resetClick = () => {
            searInfo.value = {};
            let newObj = Object.keys(searchObj);
            if(newObj.length !== 0){
                newObj.map((i:any) => {
                    searchObj[i] = ''
                });
            }
            searchObj.n_JobType = currentStatus.value;
            initInfoFun();
        };
        
        /*** 初始化数据 */
        const initInfoFun = () => {
            basicsInfo.value = [{
                    typeId: 's_JobType', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'n_JobType', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '作业类型', // placeholder数据
                    defaultProp: [
                        {label: '动火',value: 0},
                        {label: '临时用电',value: 1},
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                },{
                    typeId: 'i_Sort', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: 'number', // 输入类型(number,text等) --- 选填
                    searchVal: 'n_Sort', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '序号', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                },{
                    typeId: 'i_Name', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'v_Name', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '名称', // placeholder数据
                    defaultProp: '', // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                },{
                    typeId: 's_CanEdit', // 类型(不能为空，且唯一，与组件中typeId值对应) --- 必填
                    typeNam: '', // 输入类型(number,text等) --- 选填
                    searchVal: 'isCanEdit', // 查询字段 --- 必填
                    defaultVal: '', // 字段默认值 --- 选填
                    placeholder: '是否可编辑', // placeholder数据
                    defaultProp: [
                        {label: '是', value: true},
                        {label: '否', value: false},
                    ], // 下拉框中使用，除下拉框外其它情况为空 --- 选填
                    eventType: '', // 事件类型（如burl/change等） --- 选填
                    defaultEvent: '', // 事件名称 --- 选填
                }
            ]
        }
        
        onMounted(async () => {
            getDictFun();
            initInfoFun(); 
        });
        /*** ================================= 查询类数据操作 =================================  */

        /*** ================================= 导出数据函数操作 ================================= */
        const excelRef: any = ref(null);
        const handleExport = () => {
            if(excelRef){
                if(excelRef.value.data.length !== 0){
                    let tableExcel: any = [];
                    let tableArr = excelRef.value.data;
                    tableArr.map((item: any) => {
                        let tableObj: any = {};   
                        tableObj['名称'] = item.v_Name ? item.v_Name : '-';                  
                        tableObj['序号'] = item.n_Sort === null ? '-' : item.n_Sort;
                        tableObj['确认过程安全措施是否可编辑'] = item.isCanEdit ? '是' : '否';
                        tableObj['作业票据类型'] = item.n_JobType ? '临时用电' : '动火';
                        tableExcel.push(tableObj);
                    });
                    exportToExcel(tableExcel,'安全措施模板.xlsx');
                }else{
                    ElMessage({
                        type: 'error',
                        message: '暂无数据导出',
                    })
                }
            }
        }
        /*** ================================= 导出数据函数操作 ================================= */

        return {
            ...getTableData(SMSJOBSafetyPrecautionTempPage,{},searchObj),

            repairInfo,
            isUseDialog,
            isHoldDialog,
            nodeClick,
            deleteHandle,
            cancelUseClick,
            controlUseClick,
            areaInfo,
            liClick,
            selectedItem,
            currentStatus,

            // 导出Excel
            excelRef,
            handleExport,

            // 查询事件
            basicsInfo,
            searchHandel,
            searchClick,
            resetClick,
        }
    },
} )
</script>
<style lang="scss"> @import '../style/public.scss'; </style>
<style scoped lang="scss">
    .active{
        background: rgba(0,0,0,.2)!important;
    }
    .area-l:hover{
        background: rgba(0,0,0,.2)!important;
    }
    ul {
        list-style: none;
        li {
            cursor: pointer;
            border-bottom: 1px solid rgba(255,255,255,0.1);
            text-align: center;
            padding: 10px 0;
        }
    }
    .search-s{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        width: 100%;
        .search-s-l{
            display: flex;
            flex-direction: row;
            justify-content: flex-start;
            align-items: center;
            width: 98%;
        }
    }
    #safety-precautions {
        .box-f{
            :deep(.el-form-item__label){
                padding: 0;
            }
        }
        :deep(.el-card__body) {
            height: 100%;
        }
        :deep(.el-card){
            border: none !important;
        }
        .upload-demo{
            margin-left: 12px;
            margin-top: 2px;
        }
        .icon-e{
            :deep(.el-icon){
                margin-right: 0px!important;
            }
        }
    }
.clear-bg{
    background-color: transparent !important;
}
</style>